<script>
  import MacOS from './lib/MacOS.svelte';
  import Windows from './lib/Windows.svelte';
  import Mobile from './lib/Mobile.svelte';
  let isShowTitle = true;
  let styleType = 2; //0 手Q风格 1 Win风格 2 Mac风格
  let qqNum = '727304268';
  let nickName = '兔寄寄';
  let content = 'Asoul是我叠';
  const onQQInput = (e) => {
    if (qqNum == '2078546589') qqNum = '';
  };
  const onNickNameInput = (e) => {
    if (nickName.includes('夏雪冬花')) nickName = '';
  };
</script>

<main>
  <div class="flex-col">
    <!-- Header -->
    <div class="fake-header flex-col">
      <div
        class="fake-header-wrapper flex-row"
        on:click={() => {
          isShowTitle = !isShowTitle;
        }}
      >
        {#if isShowTitle}
          <span class="title">我有一个朋友</span>
        {:else}
          <span class="subtitle">I have an imaginary friend in my mind</span>
        {/if}
      </div>
    </div>
    <!-- Body -->
    <div class="fake-body-wrapper flex-col">
      <span class="fake-step-hint">STEP 1：选择想要生成的QQ对话框风格</span>
      <div class="fake-style-btn-group flex-row">
        {#each ['手机QQ', 'Windows', 'MacOS'] as fakeStyle, i}
          <div
            class={styleType === i ? 'fake-style-btn fake-style-btn-active' : 'fake-style-btn'}
            on:click={() => {
              styleType = i;
            }}
          >
            {fakeStyle}
          </div>
        {/each}
      </div>
      <span class="fake-step-hint">STEP 2：输入必要信息</span>
      <div class="fake-form flex-col">
        <div class="fake-form-item flex-row">
          <span class="form-title">QQ号（获取头像用）</span>
          <input class="form-input" bind:value={qqNum} on:input={onQQInput} />
        </div>
        <div class="fake-form-item flex-row">
          <span class="form-title">昵称</span>
          <input class="form-input" bind:value={nickName} on:input={onNickNameInput} />
        </div>
        <div class="fake-form-item flex-row">
          <span class="form-title">内容</span>
          <input class="form-input" bind:value={content} />
        </div>
      </div>
      <span class="fake-step-hint">STEP 3：生成！</span>
      <div>
        {#if styleType === 0}
          <Mobile />
        {:else if styleType === 1}
          <Windows />
        {:else}
          <MacOS {qqNum} {nickName} {content} />
        {/if}
      </div>
    </div>
  </div>
</main>

<style lang="scss">
  @import './assets/css/Main.scss';
</style>
